<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>短租排序</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/shortrent.shortrent.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="../js/vue.min.js"></script>
</head>
<body id="app">
<div data-v-67ef3a4a class="csdheader">
    <div data-v-67ef3a4a class="layout clear">
        <div data-v-67ef3a4a class="left csdnav" id="header">
            <label data-v-67ef3a4a v-if="user">
                <a data-v-67ef3a4a href="javascript:void(0)" class="colorRed">你好，{{ user.tel }}</a>
                <a data-v-67ef3a4a href="javascript:void(0)" class="colorRed">/</a>
                <a data-v-67ef3a4a href="../pagehome/login.html" onclick="logout()" class="colorRed"
                   style="margin-right: 10px;">退出</a>
            </label>
            <label data-v-67ef3a4a v-else>
                <a data-v-67ef3a4a href="../pagehome/login.html" class="colorRed">登录</a>
                <a data-v-67ef3a4a href="javascript:void(0)" class="colorRed">/</a>
                <a data-v-67ef3a4a href="../pagehome/register.html" class="colorRed" style="margin-right: 10px;">注册</a>
            </label>


            <a data-v-67ef3a4a="" href="#mobileZuChe">手机租车</a>
            <a data-v-67ef3a4a="" href="helpCenter.html">帮助中心</a>
        </div>
        <div data-v-67ef3a4a="" class="right phone">
            <div data-v-67ef3a4a="" class="typeTab">
                <a data-v-67ef3a4a="" href="#" style="color: rgb(199, 0, 11);">中文</a>&nbsp;/&nbsp;
                <a data-v-67ef3a4a="" href="#">English</a>
            </div>
            <div data-v-67ef3a4a="" class="menu">
                <a data-v-67ef3a4a="" href=../mymain/mymain.html>我的车速递</a>
            </div>
            <div data-v-67ef3a4a="">
                <i class="layui-icon layui-icon-cellphone" style="font-size:14px;  color:#c6000f;"></i>
                <span data-v-67ef3a4a="">400-919-8000</span>
            </div>
        </div>

    </div>
</div>


<div data-v-39f7f629 class="csdnav">
    <div data-v-39f7f629="" class="layout clear">
        <div data-v-39f7f629="" class="left logo">
            <a data-v-39f7f629="" href="/">
                <img data-v-39f7f629=""
                     src="">
            </a>
        </div>
        <div data-v-39f7f629="" class="left navCom">
            <ul data-v-39f7f629="">
                <li data-v-39f7f629="">

                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/activity.html" target="_self">优惠活动</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/joinWork.html" target="_blank" class="">加盟合作</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/netCar.html" target="_blank"
                       class="">网约车</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/longRent.html" target="_blank" class="">企业长租</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="shortrent.html" target="_self" class="colorRed">短租自驾</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="/" target="_self">
                        <span data-v-39f7f629="">首页</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="selCarMsg">
    <div class="selCarMsgCom">
        <div class="Msg">取车地址：{{getcitys}}</div>
    </div>

    <div class="selCarMsgCom">
        <div class="Msg">还车地址：{{backcitys}}</div>
    </div>
</div>


<div class="carListTab">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">按租金排序</li>
            <li>按热度排序</li>
        </ul>
        <div class="layui-tab-content">


            <div class="layui-tab-item layui-show">
                <!--for循环这段代码-->

                <div class="item clear" id="carlist">
                    <div class="thisPlace clear" id="carli" v-for="site in sites">
                        <div class="itemCarImg left">
                            <img :src="site.picture">
                        </div>
                        <div class="itemCarMsg left">
                            <h1 id="sitename">{{site.name}}</h1>
                            <p id="sitetype">{{site.type}}</p>
                            <p id="sitenum">{{site.sitnum}}座</p>
                        </div>
                        <div class="itemPriceMsg left">
                            <div class="itemPriceMsgC left">
                                <p class="p1">
                                    <span id="siteprice">{{site.price}}</span>/日均
                                </p>
                            </div>
                            <div class="carLiBao">5天以上立减 5元/天</div>
                        </div>

                        <div class="itemBtn left">
                            <button class="butt" @click="selectCar(site.id)">预定</button>
                        </div>
                    </div>
                </div>

            </div>


            <div class="layui-tab-item layui-show">


                <div class="item clear" id="carlis">
                    <div class="thisPlace clear" id="carl" v-for="car in cars">
                        <div class="itemCarImg left">
                            <img :src="car.picture">
                        </div>
                        <div class="itemCarMsg left">
                            <h1>{{car.name}}</h1>
                            <p>{{car.type}}</p>
                            <p>{{car.sitnum}}座</p>
                        </div>
                        <div class="itemPriceMsg left">
                            <div class="itemPriceMsgC left">
                                <p class="p1">
                                    <span>{{car.price}}</span>/日均
                                </p>
                            </div>
                            <div class="carLiBao">5天以上立减 5元/天</div>
                        </div>

                        <div class="itemBtn left">
                            <button class="butt" @click="selectCar(site.id)">预定</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>


</div>

<!-- 获取localStorage中的用户信息 -->
<script>
    var header = new Vue({
        el: "#header",
        data: {
            user: JSON.parse(localStorage.getItem("user"))
        },
    })

    function logout() {
        $.ajax({
            type: "get",
            url: "/logout",
            dataType: "json",
            success: function (data) {
                localStorage.clear();
                window.location.href = "/pagehome/login.html";
            },
            error: function () {
                alert("退出登录失败");
            }
        })
    }
</script>


<script type="text/javascript">

    var getid = window.location.search;
    var vm = new Vue({
        el: '.selCarMsg',
        data: {
            getcitys: '',
            backcitys: ''
        },
    });

    var vm2 = new Vue({
        el: '#carlist',
        data: {
            sites: [],
        },
        methods: {
            selectCar: function (id) {
                window.location.href = "../order/ordersubmit.html" + getid + "&cid=" + id;
            }
        },

    });

    var vm3 = new Vue({
        el: '#carlis',
        data: {
            cars: [],
        },
        methods: {
            selectCar: function (id) {
                window.location.href = "../order/ordersubmit.html" + getid + "&cid=" + id;
            }
        },

    });

</script>

<script type="text/javascript">

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    $(function () {
        //var getid = window.location.search;

        var getid = getQueryVariable("getid");
        // alert(getid);

        $.ajax({
            type: "get",
            url: "/getcityByGetid?getid=" + getid,
            dataType: "json",
            success: function (data) {
                vm.getcitys = data.name;
            },
            error: function () {
                alert("ajax加载失败");
            }

        });
    });

</script>

<script type="text/javascript">
    $(function () {

        var backid = getQueryVariable("backid");
        //alert(backid);
        // alert(backid);
        $.ajax({
            type: "get",
            url: "/getcityByGetid?getid=" + backid,
            dataType: "json",
            success: function (data) {
                vm.backcitys = data.name;
            },
            error: function () {
                alert("ajax加载失败");
            }

        });
    });

</script>

<!--按照租金排序-->
<script type="text/javascript">
    $(function () {
        //var getid = window.location.search;
        var getid = getQueryVariable("getid");
        $.ajax({
            type: "get",
            url: "/car/findCarByCid?cid=" + getid,
            dataType: "json",
            success: function (data) {
                if (data.statusCode == 200) {
                    vm2.sites = data.data;
                    console.log(vm2.sites);
                }
            },
            error: function () {
                alert("ajax加载失败");
            }

        })
    })

</script>
<!--按照热度排序-->
<script type="text/javascript">
    $(function () {
        //var getid = window.location.search;
        var getid = getQueryVariable("getid");
        $.ajax({
            type: "get",
            url: "/car/findCarByNumber?cid=" + getid,
            dataType: "json",
            success: function (data) {
                if (data.statusCode == 200) {
                    vm3.cars = data.data;
                    console.log(vm3.cars);
                }
            },
            error: function () {
                alert("ajax加载失败");
            }

        });
    });

</script>

<script type="text/javascript">

    function selectCar(cid) {

        window.location.href = "../order/ordersubmit.html?cid=" + cid;

    }

</script>


<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块


    });
</script>


</body>
</html>